<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "lifeCycle",
    data() {
        return {
            text: '生命周期'
        }
    },
    methods: {

    },
    /*
      什么是生命周期？
        从Vue实例的创建、运行到销毁期间，会伴随着各种各样的事件，这些事件统称为生命周期
    */
    // 八个常见生命周期函数（一共有11个）
    // beforeCreate初始化之前：实例初始化之前，data与methods中的数据还没加载时。 作用：页面重定向
    beforeCreate () {
        console.log(this.text);
    },
    // created 初始化之后: 实例初始之后，data和methods中的数据已经加载，是第一个可以操作data与methods中的数据的生命周期
      // created的作用：数据初始化（页面加载时），请求接口
    created () {
        console.log(this.text)
    },
    // beforeMount 挂载虚拟DOM,其页面还是Vue的占位符，也是最后一次初始化修改页面数据的机会
    beforeMount () {
        this.text = '生命周期——beforeMount'
    },
    // mounted 挂载真实的DOM，是第一个可以操作DOM元素的生命周期,将data中的数据挂载到DOM中
    mounted() {
        console.log('mounted')
    },
    // beforeUpdate 数据的更新之前，页面中的数据是旧的，data里面的数据是新的，尚未保持一致（执行0次或者无数次）
    beforeUpdate() {
        console.log('beforeUpdate')
    },
    // updated 数据的更新之后，页面中的数据与data中的数据一致（执行0次或无数次）
    updated () {
        console.log('updated')
    },
    // beforeDestroy 销毁之前，清空页面的定时器和页面监听
    beforeDestroy () {
        console.log('beforeDestroy')
    },
    // destroyed 销毁之后，清空所有内容
    destroyed () {
        console.log('页面销毁')
    }
})
</script>

<template>
  <div>
      <p>{{text}}</p>
      <router-link to="/brand">跳转</router-link>
  </div>
</template>

<style scoped lang="less">

</style>